<template>
  <div id="JobAdd">
    <el-row :gutter="42">
      <el-col :span="6">
        <div class="add" @click="add">
          <i class="iconfont icon-jiahao"></i>
          <p>添加岗位</p>
        </div>
      </el-col>
      <el-col :span="6" v-for="(item, index) in listData" :key="index">
        <div class="list">
          <div class="list-left fl">
            <div class="title">
              <span :title="item.name">{{ item.name }}</span>
              <p v-if="item.iconValue == '大数据研发工程师.png'" class="orange"></p>
              <p v-else-if="item.iconValue == '大数据可视化工程师.png'" class="green"></p>
              <p v-else-if="item.iconValue == '大数据清洗工程师.png'" class="pink"></p>
              <p
                v-else-if="item.iconValue == '大数据运维工程师.png'"
                class="darkGreen"
              ></p>
              <p
                v-else-if="item.naiconValueme == '大数据采集工程师.png'"
                class="blue"
              ></p>
            </div>
            <div class="num">
              技能模块数量：{{
                item.childrenList == "" ? 0 : item.childrenList[0].childrenList.length
              }}个
            </div>
          </div>
          <div class="list-right fr">
            <img :src="item.url" />
          </div>
          <div class="delete" @click="deleteFn(item)">
            <i class="iconfont icon-Group-"></i>
          </div>
          <div class="point" v-if="item.falg"></div>
          <div class="tips">
            <span>
              <i class="iconfont icon-shangchuan1"></i>
              <input
                id="tips-file"
                type="file"
                @change="getFile($event, item.id, item.falg)"
              />
            </span>
            <span v-if="item.childrenList != ''">
              <a :href="'/resources/system-file/' + item.pathName"
                ><i class="iconfont icon-xiazai2"></i
              ></a>
            </span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      id="jobDialog"
      :close-on-click-modal="false"
      title="添加岗位"
      :visible.sync="jobVisible"
      @close="closeDialog"
      width="870px"
    >
      <el-form :model="form" label-width="100px" :rules="rules" ref="form">
        <el-form-item label="岗位名称：" prop="jobName">
          <el-input
            type="text"
            placeholder="请输入岗位名称"
            v-model="form.jobName"
            maxlength="20"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <div class="iconcase"><span style="color: #f56c6c">*</span> 行业图标:</div>
        <div class="icon-list">
          <div
            class="item"
            @click="select(item, index)"
            v-for="(item, index) in iconList"
            :key="index"
          >
            <img :src="item.keyValuePath" />
            <i v-if="index === activeIndex" class="iconfont icon-zhengque"></i>
          </div>
        </div>
        <!-- <carousel ref="origin" :superurl="superurl" :isActive="form.isActive" v-model="form.isActive" @chooseVal='chooseVal'></carousel> -->
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <div class="button-style savefn" @click="submit('form')">确 认</div>
        <div class="button-style" style="margin-left: 20px" @click="jobVisible = false">
          取 消
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jobVisible: false,
      listData: [],
      iconList: [],
      form: {
        jobName: "",
      },
      rules: {
        jobName: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
      },
      activeIndex: "",
      activeName: "",
    };
  },
  created() {
    let self = this;
    // 初始化列表
    self.initList();
  },
  methods: {
    initList() {
      let self = this;

      self.$http
        .get("/tes/course/querySkillInfo")
        .then((response) => {
          let res = response.data;
          if (res.code === 200) {
            self.listData = res.data;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //上传文件
    getFile($event, id, falg) {
      let self = this;
      // console.log(falg)
      // return
      let fileType = $event.target.files[0].name;
      fileType = fileType.substring(fileType.lastIndexOf(".") + 1, fileType.length);
      if (fileType.toLowerCase() != "xls" && fileType.toLowerCase() != "xlsx") {
        this.$message.error("请上传xls 或 xlsx格式的文件!");
        return;
      }

      let fd = new FormData();
      fd.append("file", $event.target.files[0]);
      const loading = this.$loading({
        lock: true,
        text: "正在上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      self.$http
        .post("/tes/course/skill/model-import?skillId=" + id + "&role=" + falg, fd, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          let res = response.data;
          if (res.code === 200) {
            self.$message({
              message: "上传成功",
              type: "success",
            });
            loading.close();
            self.initList();
            $("#tips-file").val("");
          } else {
            loading.close();
            self.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加岗位
    add() {
      let self = this;
      self.$http
        .get("/tes/unauthorized/config?keys=skill_icon")
        .then((response) => {
          let res = response.data;
          if (res.code === 200) {
            self.iconList = res.data.skill_icon
          } else {
            self.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      self.jobVisible = true;
    },
    select(item, index) {
      let self = this;
      self.activeIndex = index;
      self.activeName = item.keyValue;
    },
    // 提交
    submit(form) {
      let self = this;
      if (self.activeIndex === "") {
        self.$message.error("请选择行业图标");
        return;
      }

      self.$refs[form].validate((valid) => {
        if (valid) {
          const loading = self.$loading({
            lock: true,
            text: "正在添加中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          self.$http
            .post(
              "/tes/course/insertSkillInfo?name=" +
                self.form.jobName +
                "&iconValue=" +
                self.activeName
            )
            .then((response) => {
              let res = response.data;
              if (res.code === 200) {
                self.$message({
                  message: "保存成功",
                  type: "success",
                });
                self.initList();
                self.jobVisible = false;
                loading.close();
              } else {
                loading.close();
                self.$message.error(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    closeDialog() {
      let self = this;
      self.activeIndex = "";
      self.activeName = "";
      self.$refs.form.resetFields();
    },
    // 删除
    deleteFn(item) {
      let self = this;

      // var returnedItem;

      // // var find = function(arr, id){
      // //     item2.forEach((item) => {
      // //         if(item.id == id)
      // //         {
      // //             returnedItem = item;
      // //             return item;
      // //         }
      // //         else if(item.children.length > 0)
      // //         {
      // //             find(item.children, id);
      // //         }
      // //     })
      // // }

      // // console.log(returnedItem);
      // // return
      self
        .$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          const loading = self.$loading({
            lock: true,
            text: "正在删除中...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          self.$http
            .delete("/tes/course/deleteSkillInfo?skillId=" + item.id)
            .then((response) => {
              let res = response.data;
              if (res.code === 200) {
                loading.close();
                self.$message({
                  message: "删除成功",
                  type: "success",
                });
                self.initList();
              } else {
                loading.close();
                self.$message.error(res.message);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss">
#JobAdd {
  .el-input__suffix {
    height: 30px;
    line-height: 30px;
    top: 1px;
  }
  .el-input,
  .el-input__inner {
    width: 230px;
  }
}
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
#JobAdd {
  width: $width;
  margin: 50px auto 0;
  color: #727272;
  .el-row {
    padding: 0 40px;
    margin-bottom: 20px;
    .el-col {
      margin-bottom: 40px;
    }
    .add {
      border: 1px dashed #ddd;
      height: 112px;
      text-align: center;
      color: #999;
      font-size: 14px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      cursor: pointer;
      transition: transform 0.5s;
      i {
        font-size: 16px;
        display: inline-block;
        margin-top: 40px;
      }
      p {
        font-size: 14px;
        color: #8f8f8f;
      }
      &:hover {
        transform: translate(0, -3px);
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
      }
    }
    .list {
      position: relative;
      background: #fff;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      border: 1px solid #ddd;
      height: 112px;
      box-sizing: border-box;
      padding: 22px 15px 18px;
      overflow: hidden;
      &:hover {
        .tips {
          bottom: 0;
        }
      }
      .list-left {
        .title {
          span {
            font-size: 16px;
            font-weight: bold;
            color: #323232;
            width: 130px;
            display: block;
            height: 18px;
            overflow: hidden;
            line-height: 18px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          p {
            width: 14px;
            height: 3px;
            margin-top: 10px;
            &.orange {
              background: #ff6113;
            }
            &.green {
              background: #00c083;
            }
            &.pink {
              background: #fb5fac;
            }
            &.darkGreen {
              background: #22adaf;
            }
            &.blue {
              background: #385899;
            }
          }
        }
        .num {
          font-size: 12px;
          color: #888888;
          margin-top: 25px;
        }
      }
      .list-right {
        margin-top: 5px;
      }
      .delete {
        position: absolute;
        right: 10px;
        top: 10px;
        i {
          color: #8f8f8f;
        }
      }
      .point {
        position: absolute;
        width: 6px;
        height: 6px;
        background: #385899;
        border-radius: 3px;
        left: 10px;
        top: 10px;
      }
      .tips {
        position: absolute;
        width: 100%;
        height: 50px;
        background: #fff;
        bottom: -50px;
        left: 0;
        right: 0;
        padding: 15px 15px 0;
        box-sizing: border-box;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
        transition: 0.3s;
        span {
          position: relative;
          width: 44px;
          height: 24px;
          line-height: 22px;
          background: #385899;
          text-align: center;
          display: inline-block;
          border-radius: 12px;
          cursor: pointer;
          margin-right: 8px;
          &:hover {
            background: #1277eb;
          }
          i {
            color: #fff;
            font-size: 12px;
          }
          input {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            cursor: hand;
            opacity: 0;
          }
        }
      }
    }
  }
  #jobDialog {
    .iconcase {
      margin-left: 7px;
    }
    .icon-list {
      max-height: 300px;
      overflow-y: auto;
      margin-left: 100px;
      margin-top: 14px;
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background: #ededed;
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 10px;
        background: none;
      }
      &:after {
        content: "";
        clear: both;
        display: block;
      }
      .item {
        position: relative;
        float: left;
        width: 112px;
        height: 112px;
        text-align: center;
        border-radius: 3px;
        border: solid 1px #ddd;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
        margin: 0 20px 20px 0;
        transition: transform 0.5s;
        cursor: pointer;
        img {
          margin-top: 20px;
        }
        &:hover {
          transform: translate(0, -3px);
          box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
        }
        i {
          position: absolute;
          right: 11px;
          bottom: 11px;
          font-size: 12px;
          color: #3fdb9b;
        }
      }
    }
  }
}
</style>
